import { Outlet, Navigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { ConfigProvider, Layout, theme } from "antd";
import { globalConfig } from "@/globalConfig";
import Sider from "@/components/sider";
import Header from "@/components/header";
const { Footer, Content } = Layout;

const { darkAlgorithm, defaultAlgorithm } = theme;

function PrivateRoute(props) {
    return window.localStorage.getItem(globalConfig.SESSION_LOGIN_INFO) ? props.children : <Navigate to="/login" />;
}

function Entry() {
    const globalTheme = useSelector((state) => state.theme);
    // 在body上添加theme-mode属性，标记当前主题模式（便于实现亮暗模式下的CSS差异化）
    globalTheme.dark
        ? document.body.setAttribute("theme-mode", "dark")
        : document.body.setAttribute("theme-mode", "light");
    // Ant Design主题
    let antdTheme = {
        algorithm: globalTheme.dark ? darkAlgorithm : defaultAlgorithm,
    };

    return (
        <PrivateRoute>
            <ConfigProvider theme={antdTheme}>
                <Layout className="G-fullpage">
                    <Header />
                    <Layout style={{ overflow: "hidden" }}>
                        <Sider />
                        <Layout>
                            <div className="G-layout-main">
                                <Content style={{ minWidth: 800 }}>
                                    {/* Outlet用来放置二级路由页面 */}
                                    <Outlet />
                                </Content>
                            </div>
                        </Layout>
                    </Layout>
                    <Footer style={{ textAlign: "center" }}>
                        <p>基于 MIT 许可发布</p>
                        <p>版权所有 © 2019-2025 bieber</p>
                    </Footer>
                </Layout>
            </ConfigProvider>
        </PrivateRoute>
    );
}

export default Entry;
